<template>
  <div class="modify">
    <mt-header title="修改信息">
      <div slot="left">
        <mt-button icon="back">返回</mt-button>
      </div>
    </mt-header>
    <div class="bd">
      <mt-field label="昵称" placeholder="请输入新昵称" type="tel"></mt-field>
      <div class="addr">
        <label>默认地址</label>
      </div>
        <mt-picker :slots="slots1" @change="onValuesChange" class="picker"></mt-picker>
        <mt-picker :slots="slots2" @change="onValuesChange" class="picker"></mt-picker>

      <mt-field label="详细地址" placeholder="详细地址" type="address" v-model="address"></mt-field>
      <mt-button type="primary" size="large">保存修改</mt-button>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        slots1: [
          {
            flex: 1,
            values: ['北京市', '上海市'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['海淀区', '西城区'],
            className: 'slot3',
            textAlign: 'left'
          },{
            divider: true,
            content: '-',
            className: 'slot4'
          },{
            flex: 1,
            values: ['北下关街道', '新街口街道'],
            className: 'slot5',
            textAlign: 'left'
          },
          {
            divider: true,
            content: '-',
            className: 'slot6'
          }, {
            flex: 1,
            values: ['1小区','2小区'],
            className: 'slot7',
            textAlign: 'right'
          }
        ]
      }
    },
    methods: {
      onValuesChange(picker, values) {
        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
      }
    },
  };
</script>
<style scoped>
  .modify {
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 90%;
  }
  .bd {
    background-color: #fff;
    position: absolute;
    top: 12%;
    width: 86%;
    height: 76%;
    left: 7%;
  }
  .addr {
    width: 100%;
    text-align: left;
    margin-left: 10px;
  }
</style>
